<template>
  <Header />

  <div class="content p-30 w-vw-90 min-h-vh-80" id="exportPdf">
    <exprotFile />
    <div class="flex flex-justify-around  p-10 mt-10 mb-10 outline-1 text-center min-h-100">
      <div>
        <AButton type="primary">AntDesignVueResolver</AButton>
      </div>
      <div>测试</div>
      <div>可以用的</div>
    </div>
    <br />
    <div class="text-center p-10 mt-10 mb-10 outline-1 text-center min-h-120">
      <a href="https://unocss.dev/interactive/" target="_blank" rel="noopener noreferrer">unocss 文档</a>
      <h1>{{ $t('name') }}</h1>
      <h2>{{ $t('login.userName') }}</h2>
      <br />
    </div>

    <div class="p-10 mt-10 mb-10 outline-1 text-center min-h-100">
      <h2>Unocss Icons preset</h2>

      <div class="i-custom-vite w-px-30 h-px-30" />
      <div i-custom-vite w-px-30 h-px-30 />
      <!-- <StepBackwardOutlined /> -->
      <div class="i-antd-step-backward-outlined w-px-30 h-px-30 font-size-20 c-yellow" />

      <span class="i-carbon-moon w-px-30 h-px-30"></span>
      <div class="i-carbon-moon w-px-30 h-px-30 c-yellow" />
      <div class="i-carbon-sun w-px-30 h-px-30 c-yellow" />
      <div class="i-carbon-sun w-px-30 h-px-30" />

      <!-- An orange alarm from Material Design Icons -->
      <div class="i-mdi-alarm text-orange-400 w-px-30 h-px-30" />
    </div>

    <div class="p-10 mt-10 mb-10 outline-1 min-h-100">
      <h2 text-center>MyLoading</h2>
      <a-button type="primary" @click="() => (loading = !loading)">Loading</a-button>
      <MyLoading :loading type="goOn">
        <h2 text-center>邯郸学步</h2>
        <div>
          战国时期，有一个燕国人听说赵国邯郸人的步伐优美，便特意前往邯郸学习。可他既没有学会邯郸人的步法，又忘了自己原来的走路方式，最终只能爬着回到燕国。
这个故事的寓意是：盲目模仿他人而不考虑自身情况，可能会失去原有的优势，最终一无所获。它常被用来劝诫人们要根据自身特点学习，而不能盲目跟风，否则可能得不偿失。
        </div>
      </MyLoading>
    </div>
    <div class="pinia p-10 mt-10 mb-10">
      <h1 class="text-center">pinia</h1>
      <div class="button-box flex-start mb-1">
        <a-space>
          <a-button type="primary" @click="changePina(1)">add同步</a-button>
          <a-button type="primary" @click="changePina(2)">promise异步</a-button>
          <a-button type="primary" @click="changePina(3)">test</a-button>
          <a-button type="primary" @click="changePina(5)">$patch</a-button>
          <a-button type="primary" @click="changePina(6)">getters</a-button>
          <a-button type="primary" @click="changePina(4)">reset</a-button>
        </a-space>
      </div>
      <div>
        <a-button>stata.count: {{ count }}</a-button>
        <a-button>stata.msg: {{ msg }}</a-button>
        <a-button>stata.price: {{ price }}</a-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import exprotFile from './exprotFile.vue';
import useCounterStore from '/@/store/modules/counter';

import { storeToRefs } from 'pinia';
let pinia = useCounterStore();

//使用storeToRefs解构保持响应性，当然也可以直接结构，根据具体情况而定
let { count, price, msg, getCount } = storeToRefs(pinia);
// const count = computed(() => pinia.count)
const changePina = (type: number) => {
  if (type == 1) {
    pinia.add();
  } else if (type == 2) {
    pinia.promiseIncrement();
  } else if (type == 3) {
    pinia.priceAdd(1, 2);
  } else if (type == 4) {
    pinia.$reset();
  } else if (type == 5) {
    pinia.$patch((state) => {
      state.count += 2;
      state.price += 2;
      state.msg = '$patch批量修改';
    });
  } else if (type == 6) {
    console.log(pinia.getCount);
    //如果想使用解构，一定要用 storeRoRefs
    console.log(getCount);
    message.info(pinia.getCount);
  }
};

const router = useRouter();
const loading = ref(false);
</script>

<style lang="less" scoped>
.content {
  // width: 90vw;
  // min-height: 90vh;
  margin: auto;
  outline: 1px dashed #999;
  .pinia {
    outline: 1px dashed #999;
  }
}
</style>
